import { Component, OnInit, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener, ViewChild, Renderer2, ElementRef } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Category } from './model/category';
import { SubCategory } from './model/subcategory';
import { Categorys } from './model/categorys';
import { GetCategoryService } from './service/getCategoryService';

@Component({
    selector: 'app-navbar',
    templateUrl: './app-navbar.html',
    // animations: [
    //     trigger('fadeInOutTranslate', [
    //         state('in', style({ display: 'block' })),
    //         state('out', style({ display: 'none' })),
    //         transition('in<=>out', [
    //             animate(0)
    //         ]),
    //     ]),
    // ],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppNavBarComponent implements OnInit {

    categorys: Categorys;

    constructor(private getcategoryservice: GetCategoryService, private rd: Renderer2) { }

    ngOnInit() {
        this.getMenus();
    }

    getMenus() {
        this.getcategoryservice.getData().then((data) => {
            this.categorys = data;
        });
    }

    popMenu(event: any) {
        this.rd.setStyle((event.currentTarget.children as HTMLCollection).namedItem('nav-dropdown'), 'display', 'block');
    }

    hideMenu(event: any) {
        this.rd.setStyle((event.currentTarget.children as HTMLCollection).namedItem('nav-dropdown'), 'display', 'none');
    }
}